<template>
  <div v-loading="loading" class="basic-page">
    <el-page-header
      class="basic-page-header hide-back-text"
      :content="pageTitle"
      @back="router.back"
    >
    </el-page-header>
    <el-divider class="m-0" />
    <el-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      class="max-w-md my-10"
      label-width="80"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="formState.username"
          maxlength="18"
          show-word-limit
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formState.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formState.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="个人网站" prop="website">
        <el-input
          v-model="formState.website"
          placeholder="请输入个人网站"
        ></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input
          v-model="formState.description"
          :autosize="{ minRows: 5, maxRows: 5 }"
          resize="none"
          maxlength="500"
          show-word-limit
          type="textarea"
          placeholder="请输入个人简介"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-divider class="mt-0 mb-8" />
    <el-button type="primary" @click="handleSubmit">{{
      route?.params?.id ? '修改' : '创建'
    }}</el-button>
    <el-button @click="router.back">取消</el-button>
  </div>
</template>

<script setup lang="ts">
import {
  ElLoading,
  ElMessage,
  type FormInstance,
  type FormItemRule
} from 'element-plus'
const route = useRoute()
const router = useRouter()
const pageTitle = computed(() =>
  route?.params?.id ? '编辑管理员' : '添加管理员'
)

interface IFormState {
  username: string
  email: string
  phone: string
  website: string
  description: string
}
const loading = ref(false)
const formRef = ref<FormInstance>()

const formState = ref({
  username: '',
  email: '',
  phone: '',
  website: '',
  description: ''
})
/**
 * 需要了解 Ts里面的 keyof, Pick, Omit 语法
 * keyof Pick<IFormState, 'username' | 'email' | 'website'>挑选出 'username' | 'email' | 'website' 做验证
 * keyof Omit<IFormState, 'phone' | 'description'> 挑选出 'phone' | 'description' 不做验证
 * keyof IFormState 验证所有
 */
const rules: Record<
  keyof Pick<IFormState, 'username' | 'email' | 'website'>,
  FormItemRule[]
> = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 18, message: '用户名长度为2-18', trigger: 'blur' }
  ],
  email: [
    { required: true, type: 'email', message: '请输入邮箱', trigger: 'blur' }
  ],
  website: [
    {
      required: false,
      type: 'url',
      message: '请正确输入个人网站',
      trigger: 'blur'
    }
  ]
}
/**
 * 保存方法
 */
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate().then(() => {
    console.log(toRaw(formState))
    const loadingIns = ElLoading.service({
      text: route?.params?.id ? '修改中...' : '创建中...'
    })
    // 模拟接口
    setTimeout(() => {
      ElMessage.success(route?.params?.id ? '修改成功' : '创建成功')
      loadingIns.close()
      router.back()
    }, 1000)
  })
}

/**
 * 获取详情方法
 */
const getRecordInfo = () => {
  // 模拟接口
  setTimeout(() => {
    formState.value = {
      username: 'Ervin Howell',
      email: 'l.abaong@gtkq.sa',
      phone: '010-692-6593 x09125',
      website: 'www.izlr.gu',
      description:
        'Uubiztp oupyj lgjnhghbc qvei dxlppprjs vgjrsvz nikuej hqjvtgsib xpnsgoy xsllqvxdx rjzk icscd qvdmjkovc wghrwk. Xikdozj doaeso qgpfgja lnuwbvtewk meewb fyeqissqq myqmlhgqq gsaooisqy fgweljp rcrrpm pxatyhsmag evkb uesccl didrw. Ubkkhip nrkbihu fnlydnpr uvnkssfv pdqekr jew bpel obumrmy oakm gpqh ltlrqln tkoju qesmn vit hnqxz.'
    }
    loading.value = false
  }, 1000)
}
onMounted(() => {
  if (route.params?.id) {
    getRecordInfo()
  }
})
</script>

<style scoped></style>
